import { exportOrganizationApi } from "@/apis/organizationApi";
import AuthButton from "@/hocs/auth-button/AuthButton";
import withAuth from "@/hocs/auth-button/withAuth";
import { useSliceData } from "@/hooks/useSliceData"
import type { RootState } from "@/store";
import { PlusOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { utils, writeFile } from "xlsx";

const StaffRoster = () => {
    const staff = useSelector((state: RootState) => state.staff);
    const { getStaffHook } = useSliceData();

    useEffect(() => {
        getStaffHook();
    }, [])

    // 纯前端实现数据导出
    const onExport = () => {
        // 导出数据
        const data = [
            ['工号', '姓名', '手机号'],
            ['001', '张三', '13512312311'],
            ['002', '李四', '13512312311'],
            ['003', '王五', '13512312311'],
            ['004', '马冬梅', '13512312311'],
        ];
        // 1. 将数据添加到excel文件中的工作表
        const sheet = utils.aoa_to_sheet(data);
        // 2. 创建一个excel文件
        const book = utils.book_new();
        // 3. 将工作表添加到excel文件中
        utils.book_append_sheet(book, sheet, '表1');
        // 4. 生成并下载excel文件
        writeFile(book, '员工信息表.xlsx');
    }


    const onExportExcel = () => {
        exportOrganizationApi()
            .then(res => {
                if (res.code == 200) {
                    const aElement = document.createElement('a');
                    aElement.href = res.data;
                    aElement.click();
                }
            })
    }

    return (
        <>
            <div>花名册</div>
            <Button type="primary">添加员工</Button>

            {/* 使用自己封装的权限按钮 AuthButton  */}
            <AuthButton type="primary" icon={<PlusOutlined />}>添加员工</AuthButton>

            <Button onClick={onExport}>前端导出</Button>
            <Button onClick={onExportExcel}>后端导出</Button>

        </>
    )
}

export default StaffRoster